<script>
export default {
  name: 'Header',
  components: {
    // HelloWorld
  },
  props:{
    title:''
  },
  setup(){
    // const handleChange = (value) => {
    //   console.log(value)
    // }
    // return {
    //   handleChange
    // }
  },
  data(){
    return {
      photo:'',
      nickName:''
    }
  },
  methods:{
    async logout(){
      let res = await this.$get('/logout')
      if(!res.errorMsg) location.href = '#/login'
    }
  },
  async mounted(){
    let user = await this.$get('/userInfo')
    this.photo = user.photo
    this.nickName = user.nickName
  }
}
</script>

<template>
  <div class="header">
    <div>{{ title }}</div>
    <div class="topContent">
      <slot></slot>
    </div>
    <img class="photo" :src="photo" />
    <div>{{ nickName }},您好</div>
    <div class="logout" @click="logout">退出登录</div>
  </div>
</template>

<style scoped>
.header{
  display: flex;
  background-color: #63b0ff;
  height: 100px;
  justify-content: center;
  align-items: center;
}
.topContent{
  flex:1;
}
.photo{
  width: 48px;
  height: 48px;
  margin-right: 16px;
}
.logout{
  cursor: pointer;
  margin: 0 32px;
}
</style>